body {
	margin: 0;/*reset de default margin van browser*/
}

img {
	display: block;
	border: 0;
	width: 80%; /*waarom %*/
	height: auto;
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,h2,h3 {
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.site {
	background: #ededed;
	min-height: 100vh;
}

.header,.footer {
	background: #52a7f9;
	padding: 1em 2em;
	color: white;
}

.main-content {
	background: #6fc041;
}
.header {
	background: #52a7f9;
	color: white;
}

.sidebar {
	background: #b36ae2;
}

.twin {
	background: #f3901a;
}
/* nth-of-type(1) */
.twin:last-of-type {
	background: #7ECEFD;
}
.footer a {
	color: white;
}
.footer a:hover,
.footer a:focus {
	border-bottom: 3px solid red;
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens
--------------------------------------------------------------*/
@media screen and (max-width: 800px) {
	.site {
		display: grid;
		grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
		grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
	}
	.header {
        grid-column: 2/6;
    }
	.footer {
		grid-column: 6/8;
        grid-row: 4/5;
	}
	.main-content {
		grid-column: 2/6;
	}
	.sidebar {
		grid-column: 6/8;
        grid-row: 2/5;
	}
	.twin {
		grid-column: 2/6;
        grid-row: 3/5;
		
	}
	.twin:last-of-type {
		grid-column: 6/8;
        grid-row: 1;
	}
}

@media screen and (min-width: 800px) {
	.site {
		display: grid;
		grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
		grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
	}
	.header,
	.footer {
		grid-column: span 8;
	}
	.main-content {
		grid-column: 2/6;
	}
	.sidebar {
		grid-column: 6/8;
	}
	.twin {
		grid-column: 2/5;
		
	}
	.twin:last-of-type {
		grid-column: 5/8;
	}
}